<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh" dir="ltr" class="no-js">
<!--<![endif]-->

<head>

<!-- ––––––––––––––––––––––––––––––––––––––––– -->
<!-- META TAGS                                 -->
<!-- ––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<!-- Always force latest IE rendering engine -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Mobile specific meta -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

<!-- ––––––––––––––––––––––––––––––––––––––––– -->
<!-- PAGE TITLE                                -->
<!-- ––––––––––––––––––––––––––––––––––––––––– -->
<title>FRIDAY | Coupons, Deals, Discounts and Promo codes
	Template</title>

<!-- ––––––––––––––––––––––––––––––––––––––––– -->
<!-- SEO METAS                                 -->
<!-- ––––––––––––––––––––––––––––––––––––––––– -->
<meta name="description"
	content="FRIDAY is a responsive multipurpose-ecommerce site template allows you to store coupons and promo codes from different brands and create store for deals, discounts, It can be used as coupon website such as groupon.com and also as online store">
<meta
	name="	black friday, coupon, coupon codes, coupon theme, coupons, deal news, deals, discounts, ecommerce, friday deals, groupon, promo codes, responsive, shop, store coupons">
<meta name="robots" content="index, follow">
<meta name="author" content="CODASTROID">

<!-- ––––––––––––––––––––––––––––––––––––––––– -->
<!-- PAGE FAVICON                              -->
<!-- ––––––––––––––––––––––––––––––––––––––––– -->
<link rel="apple-touch-icon"
	href="assets/images/favicon/apple-touch-icon.png">
<link rel="icon" href="assets/images/favicon/favicon.ico">

<!-- ––––––––––––––––––––––––––––––––––––––––– -->
<!-- GOOGLE FONTS                              -->
<!-- ––––––––––––––––––––––––––––––––––––––––– -->
<link
	href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600"
	rel="stylesheet">

<!-- ––––––––––––––––––––––––––––––––––––––––– -->
<!-- Include CSS Filess                        -->
<!-- ––––––––––––––––––––––––––––––––––––––––– -->

<!-- Bootstrap -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">

<!-- Font Awesome -->
<link href="assets/vendors/font-awesome/css/font-awesome.min.css"
	rel="stylesheet">

<!-- Linearicons -->
<link href="assets/vendors/linearicons/css/linearicons.css"
	rel="stylesheet">

<!-- Owl Carousel -->
<link href="assets/vendors/owl-carousel/owl.carousel.min.css"
	rel="stylesheet">
<link href="assets/vendors/owl-carousel/owl.theme.min.css"
	rel="stylesheet">

<!-- Flex Slider -->
<link href="assets/vendors/flexslider/flexslider.css" rel="stylesheet">

<!-- Template Stylesheet -->
<link href="assets/css/base.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">

</head>

<body id="body" class="wide-layout preloader-active">



	<!--[if lt IE 9]>
        <p class="browserupgrade alert-error">
        	You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.
        </p>
    <![endif]-->

	<noscript>
		<div class="noscript alert-error">
			For full functionality of this site it is necessary to enable
			JavaScript. Here are the <a href="http://www.enable-javascript.com/"
				target="_blank"> instructions how to enable JavaScript in your
				web browser</a>.
		</div>
	</noscript>

	<!-- ––––––––––––––––––––––––––––––––––––––––– -->
	<!-- PRELOADER                                 -->
	<!-- ––––––––––––––––––––––––––––––––––––––––– -->
	<!-- Preloader -->
	<div id="preloader" class="preloader">
		<div class="loader-cube">
			<div class="loader-cube__item1 loader-cube__item"></div>
			<div class="loader-cube__item2 loader-cube__item"></div>
			<div class="loader-cube__item4 loader-cube__item"></div>
			<div class="loader-cube__item3 loader-cube__item"></div>
		</div>
	</div>
	<!-- End Preloader -->
	<!-- ––––––––––––––––––––––––––––––––––––––––– -->
	<!-- WRAPPER                                   -->
	<!-- ––––––––––––––––––––––––––––––––––––––––– -->
	<div id="pageWrapper" class="page-wrapper">
		<!-- –––––––––––––––[ HEADER ]––––––––––––––– -->
		<jsp:include page="head.jsp"></jsp:include>
		<!-- –––––––––––––––[ HEADER ]––––––––––––––– -->

		<!-- –––––––––––––––[ PAGE CONTENT ]––––––––––––––– -->
		<main id="mainContent" class="main-content">
		<form action="topay.shop" method="post">
			<div class="page-container">
				<div class="container">
					<div class="cart-area ptb-60">
						<div class="container">
							<div class="cart-wrapper">
								<h3 class="h-title mb-30 t-uppercase">我的购物车</h3>
								<table id="cart_list" class="cart-list mb-30">
									<thead class="panel t-uppercase">
										<tr>
										 	<th style="width: 50px;height:50px;"><input id="chkAll" type="checkbox" onchange="checkAll()" style="width: 10px;height:10px;"/>全选</th>
											<th style="width: 300px;height:10px;">商品信息</th>
											<th>单价</th>
											<th>折扣</th>
											<th>优惠后的价格</th>
											<th>数量</th>
											<th>总价</th>
											<th>删除</th>
										</tr>
									</thead>
									<tbody>

										<c:if test="${empty shopCar}">
											<h1>
												<a href="index.shop">哦豁你的购物车没有东西,赶紧去购买把</a>
											</h1>
										</c:if>

										<c:if test="${not empty shopCar}">


											<!-- 遍历我们购物车里面的所有内容 -->
											<c:forEach items="${shopCar.values()}" var="g">
												<tr class="panel alert">
												<td style="width: 10px;height:10px;">
												 <input name="gids" class="checkbox" type="checkbox" onchange="check(this)" value="${g.gid}" style="width: 10px;height:10px;">
												</td>
													<td style="width: 300px;height:10px;">
														<div class="media-left is-hidden-sm-down">
															<figure class="product-thumb">
																<img src="${g.gimage}" alt="product">
															</figure>
														</div>
														<div class="media-body valign-middle">
															<h6 class="title mb-15 t-uppercase">
																<a href="#">${g.glongname}</a>
															</h6>
															<div class="type font-12">
																<span class="t-uppercase">类型 : </span>${g.gtypename}</div>
														</div>
													</td>
													<td>￥${g.gprice}</td>
													<td>折扣：<fmt:formatNumber value="${(1-g.gdiscount)}"
															type="percent" pattern="" /></td>
													<td prc="${g.gprice * g.gdiscount}">优惠后：<fmt:formatNumber
															value="${g.gprice * g.gdiscount}" type="currency"
															pattern="￥.00" /></td>
													<td><a id="sub" gid="${g.gid}" onclick="abcsub(this)">-</a>
														<input class="quantity-label" readonly type="number"
														value="${g.buynumber}"> <a id="add" gid="${g.gid}"
														onclick="abcadd(this)">+</a> 
														</td>
															<td class="sum">
														<div id="d${g.gid}" name="tdiv" class="sub-total"><fmt:formatNumber value="${g.gprice * g.buynumber* g.gdiscount}" type="currency" pattern="￥.00" /></div>
													</td>
													<td>
														<button type="button" class="close" gid="${g.gid }"
															data-dismiss="alert" aria-hidden="true">
															<i class="fa fa-trash-o"></i>
														</button>
													</td>
												</tr>

											</c:forEach>

										</c:if>
									</tbody>
								</table>
														<script type="text/javascript">
														
														
														function checkAll(){
															//获取我们全选按钮的选中的状态;
															var ck = $("#chkAll").prop("checked");
															
															//修改我们所有名字为tck的复选框的状态
															$("input[name='gids']").prop("checked",ck);
															
															var tdivs=$("div[name='tdiv']");
															var count=0;
															var num=0;
															
															for(var i=0 ; i<tdivs.size(); i++){
																count+= parseFloat($(tdivs[i]).text().substr(1));
													
																num++;
															}
															 count = Math.round(count*100)/100; 
															 
															changeTotal(count,10*num);
															  /* window.location.reload()  */
															
														}
														
														
														function check(obj){
															$("#chkAll").prop("checked",$("input[name='gids']").length == $("input[name='gids']:checked").length);
															var x=$("input[name='gids']:checked")
															console.info(x.size())
															var count=0;
															var num=0;
															
															for(var i=0 ; i<x.size(); i++){
																var t=$(x[i]).parent().siblings(".sum").children().text().substr(1);
																console.info(t)
																count+= parseFloat(t);
													
																num++;
															}
															 count = Math.round(count*100)/100; 
															 
															changeTotal(count,10*num);
															 /*  window.location.reload()  */
															
														}
														
														
														
	                                            		function abcsub(obj){
	                                            			
	                                            			$.ajax({
																url:"subShopCar.shop",
																type:"post",
																data:{"gid":$(obj).attr("gid")},
																success:function(res){
																	var json = JSON.parse(res);
																	//获取文本框里面原有的值
																	var pr = $(obj).next().val();
																	
																	if(pr == 1){
																		
																		//把当前纪录给干掉
																		$(obj).parents("tr").remove();
																		
																	}else{
																		pr--;
																		$(obj).next().val(pr);//对原有的值-1
																	}
																	
																	//修改head里面的购物车数量
																	$(".cart-number").text(json.mes);
																	
																	var price =$(obj).parent().prev().attr("prc");
																	var prices=parseFloat(pr * price);
																	prices = Math.round(prices*100)/100; 
																	console.info(prices)
																	$(obj).parent().next().children("div").text("￥" + prices);
																	
																	
																/* 	var tdivs=$("div[name='tdiv']");
																	var count=0;
																	var num=0;
																	
																	for(var i=0 ; i<tdivs.size(); i++){
																		count+= parseFloat($(tdivs[i]).text().substr(1));
															
																		num++;
																	}
																	 count = Math.round(count*100)/100; 
																	 
																	changeTotal(count,10*num);*/
																	  window.location.reload()  
																}
															});
	                                            			
	                                            		}
	                                            		
	                                            		
	                                            		
	                                            		function abcadd(obj){

															$.ajax({
																url:"addShopCar.shop",
																type:"post",
																data:{"gid":$(obj).attr("gid")},
																success:function(res){
																	var json = JSON.parse(res);
																	//获取文本框里面原有的值
																	var pr = $(obj).prev().val();
																	pr++;
																	$(obj).prev().val(pr);//对原有的值+1
																	
																	//修改head里面的购物车数量
																	$(".cart-number").text(json.mes);

																	var price =$(obj).parent().prev().attr("prc");
																	var prices=parseFloat(pr * price);
																	prices = Math.round(prices*100)/100; 
																	
																	$(obj).parent().next().children("div").text("￥" + prices);
																	
																	
																	/* var tdivs=$("div[name='tdiv']");
																	var count=0;
																	var num=0;
																	
																	for(var i = 0 ; i < tdivs.size() ; i++){
												
																		count += parseFloat($(tdivs[i]).text().substr(1));
																		console.info(parseFloat($(tdivs[i]).text().substr(1)))
																		num++;
																	}
																	 count = Math.round(count*100)/100; 
																	
																	changeTotal(count,10*num);*/
																	  window.location.reload()  
																}
															});
	                                            			
	                                            		}
	                                            		
	                                            		
	                                            		function changeTotal(dt,yp){
	                                            			$("#tp").text("￥"+dt)
	                                            			$("#yp").text("￥"+yp)
	                                            			$("#lasttp").text("￥"+(dt+yp))
	                                            		}
	                                            		
	                                            		
	                       
	                                            	</script>
												
								<div class="cart-price">
									<h5 class="t-uppercase mb-20">购物车总计</h5>
									<ul class="panel mb-20">
										<li>
											<div class="item-name">总价</div>
											<%-- ￥${shopCarCount } --%><div id="tp" class="price">￥0.00</div>
										</li>
										<li>
											<div class="item-name">运费</div>
											<%-- ￥ ${shopCar.size()*10 } --%><div id="yp" class="price">￥0.00</div>
										</li>
										<li>
											<div class="item-name">
												<strong class="t-uppercase">订单总计</strong>
											</div>
											<%-- <fmt:formatNumber value="${shopCarCount+shopCar.size()*10 }" type="currency"pattern="￥.00" /> --%><div id="lasttp" class="price">￥0.00</div>
										</li>
									</ul>
									<div class="t-right">
										<button class="btn btn-rounded btn-lg">结算</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		 </form>
		</main>
		<!-- –––––––––––––––[ END PAGE CONTENT ]––––––––––––––– -->
		<section class="footer-top-area pt-70 pb-30 pos-r bg-blue">
			<div class="container">
				<div class="row row-tb-20">
					<div class="col-sm-12 col-md-7">
						<div class="row row-tb-20">
							<div class="footer-col col-sm-6">
								<div class="footer-about">
									<img class="mb-40" src="assets/images/logo_light.png"
										width="250" alt="">
									<p class="color-light">Lorem ipsum dolor sit amet,
										consectetur adipisicing elit. Laboriosam dolores quidem
										mollitia id ipsa nisi necessitatibus iure repudiandae aperiam,
										odit ipsam dolor fugiat corporis nesciunt illo nemo minus.</p>
								</div>
							</div>
							<div class="footer-col col-sm-6">
								<div class="footer-top-twitter">
									<h2 class="color-lighter">Twitter Feed</h2>
									<ul class="twitter-list">
										<li class="single-twitter">
											<p class="color-light">
												<i class="ico fa fa-twitter"></i><a href="#">@masum_rana
													:</a> Duis aute irure dolor in reprehenderit in voluptate velit
												esse cillum dolore in reprehenderit.
											</p>
										</li>
										<li class="single-twitter">
											<p class="color-light">
												<i class="ico fa fa-twitter"></i><a href="#">@masum_rana
													:</a> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
												Ratione id corrupti iusto cupiditate omnis.
											</p>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="col-sm-12 col-md-5">
						<div class="row row-tb-20">
							<div class="footer-col col-sm-6">
								<div class="footer-links">
									<h2 class="color-lighter">Quick Links</h2>
									<ul>
										<li><a href="deals_grid.html">Latest Deals</a></li>
										<li><a href="coupons_grid.html">Newest Coupons</a></li>
										<li><a href="contact_us_02.html">Contact Us</a></li>
										<li><a href="404.html">Error 404</a></li>
										<li><a href="terms_conditions.html">Terms of Use</a></li>
										<li><a href="faq.html">FAQs</a></li>
									</ul>
								</div>
							</div>
							<div class="footer-col col-sm-6">
								<div class="footer-top-instagram instagram-widget">
									<h2>Instagram Widget</h2>
									<div class="row row-tb-5 row-rl-5">


										<div class="instagram-widget__item col-xs-4">
											<img src="assets/images/instagram/instagram_01.jpg" alt="">
										</div>


										<div class="instagram-widget__item col-xs-4">
											<img src="assets/images/instagram/instagram_02.jpg" alt="">
										</div>


										<div class="instagram-widget__item col-xs-4">
											<img src="assets/images/instagram/instagram_03.jpg" alt="">
										</div>


										<div class="instagram-widget__item col-xs-4">
											<img src="assets/images/instagram/instagram_04.jpg" alt="">
										</div>


										<div class="instagram-widget__item col-xs-4">
											<img src="assets/images/instagram/instagram_05.jpg" alt="">
										</div>


										<div class="instagram-widget__item col-xs-4">
											<img src="assets/images/instagram/instagram_06.jpg" alt="">
										</div>


									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-xs-12">
						<div class="payment-methods t-center">
							<span><img src="assets/images/icons/payment/paypal.jpg"
								alt=""></span> <span><img
								src="assets/images/icons/payment/visa.jpg" alt=""></span> <span><img
								src="assets/images/icons/payment/mastercard.jpg" alt=""></span> <span><img
								src="assets/images/icons/payment/discover.jpg" alt=""></span> <span><img
								src="assets/images/icons/payment/american.jpg" alt=""></span>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!-- –––––––––––––––[ FOOTER ]––––––––––––––– -->
		<footer id="mainFooter" class="main-footer">
			<div class="container">
				<div class="row">
					<p>Copyright &copy; 2016 . All rights reserved.</p>
				</div>
			</div>
		</footer>
		<!-- –––––––––––––––[ END FOOTER ]––––––––––––––– -->

	</div>
	<!-- ––––––––––––––––––––––––––––––––––––––––– -->
	<!-- END WRAPPER                               -->
	<!-- ––––––––––––––––––––––––––––––––––––––––– -->


	<!-- ––––––––––––––––––––––––––––––––––––––––– -->
	<!-- BACK TO TOP                               -->
	<!-- ––––––––––––––––––––––––––––––––––––––––– -->
	<div id="backTop" class="back-top is-hidden-sm-down">
		<i class="fa fa-angle-up" aria-hidden="true"></i>
	</div>

	<!-- ––––––––––––––––––––––––––––––––––––––––– -->
	<!-- SCRIPTS                                   -->
	<!-- ––––––––––––––––––––––––––––––––––––––––– -->

	<!-- (!) Placed at the end of the document so the pages load faster -->

	<!-- ––––––––––––––––––––––––––––––––––––––––– -->
	<!-- Initialize jQuery library                 -->
	<!-- ––––––––––––––––––––––––––––––––––––––––– -->
	<script src="assets/js/jquery-1.12.3.min.js"></script>

	<!-- ––––––––––––––––––––––––––––––––––––––––– -->
	<!-- Latest compiled and minified Bootstrap    -->
	<!-- ––––––––––––––––––––––––––––––––––––––––– -->
	<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>

	<!-- ––––––––––––––––––––––––––––––––––––––––– -->
	<!-- JavaScript Plugins                        -->
	<!-- ––––––––––––––––––––––––––––––––––––––––– -->
	<!-- (!) Include all compiled plugins (below), or include individual files as needed -->

	<!-- Modernizer JS -->
	<script src="assets/vendors/modernizr/modernizr-2.6.2.min.js"></script>

	<!-- Owl Carousel -->
	<script type="text/javascript"
		src="assets/vendors/owl-carousel/owl.carousel.min.js"></script>

	<!-- FlexSlider -->
	<script type="text/javascript"
		src="assets/vendors/flexslider/jquery.flexslider-min.js"></script>

	<!-- Coutdown -->
	<script type="text/javascript"
		src="assets/vendors/countdown/jquery.countdown.js"></script>

	<!-- ––––––––––––––––––––––––––––––––––––––––– -->
	<!-- Custom Template JavaScript                   -->
	<!-- ––––––––––––––––––––––––––––––––––––––––– -->
	<script type="text/javascript" src="assets/js/main.js"></script>
</body>

</html>
